<!-- Dom模板 -->
<template>
    
  <div class="dingyuebox">
        <!-- Dom内容 -->
    <div class="dingyue_head">
      <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
      <h3>浏览记录</h3>
    </div>
       
    <div>
      <ul class="BT_epinasty">
        <li v-for="(item, index) in historyd" class="BT_Econt" :key="index">
          <div><img :src="item.book_img_url" /></div>
          <div class="BT_Eitem">
            <div>{{ item.bookname }}</div>
            <div>{{ item.describes }}</div>
            <div>已播放至第{{ item.diversity }}集</div>
            <div class="BT_btn">
              <div>{{ item.money }}点券</div>
              <div><button  @click="liClick(item)">立即播放</button></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="emplay" class="kong">
        <p class="iconfont icon-shoutidai">?</p>
        <p>你还没有收藏的内容哦</p>
      </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      historyd: [],
      emplay: false,
    };
  }, // 生命周期 - 创建完成（访问当前this实例）
  created() {
      this.historyd = this.$store.state.login.loginuserMsg.viewing.cont;
  }, // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
     this.$store.dispatch("bags/getUserMsg",{userid:sessionStorage.getItem("userId")}).then()
        if(sessionStorage.getItem("userId")){
            if(this.$store.state.bags.shoucangData.length===0){
                this.emplay = true 
              }else{
                this.emplay = false 
              }
        }
        if(!sessionStorage.getItem("userId")){
            this.emplay = true 
        }
  }, // Vue方法定义
  methods: {
     liClick(item) {
       console.log(item);
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      this.$store.dispatch("bags/bookItem", item);
      this.$store.commit("bags/getMusicItem", {
        item,
        index: item.diversity - 1,
      });
      this.$router.history.push({
        path: "/playmusic",
        query: {
          path: "/my",
        },
      });
    },
    close() {
      this.$parent.back();
    },
  },
};
</script>

<style scoped>
@import url("../../../static/fonts/iconfont.css");
/* @import url(); 引入css类 */
::-webkit-scrollbar {
  display: none;
}
.dingyuebox {
  width: 100vw;
  height: 100vh;
  background: white;
}
.dingyue_head {
  width: 90%;
  height: 1.173333rem;
  margin-left: 3%;
  padding-top: 0.4rem;
}
.dingyue_head p {
  font-size: 0.746667rem;
  float: left;
}
.dingyue_head h3 {
  width: 61%;
  font-size: 0.586667rem;
  line-height: 0.826667rem;
  float: right;
}
.BT_epinasty {
  width: 100%;
  height: calc(100vh - 56px);
  padding: 0.4rem 0.4rem 1.333333rem;
  overflow-y: auto;
}
/* 每一个li */
.BT_Econt {
  display: flex;
  margin-bottom: .4rem;
}
.BT_Econt > div:nth-child(1) img {
  width: 2.506667rem;
  border-radius: 0.133333rem;
  height: 3.226667rem;
}
.BT_Eitem {
  margin-left: 0.24rem;
}
.BT_Eitem > div:nth-child(1) {
  font-size: 0.426667rem;
  margin-top: 0.08rem;
  font-weight: 700;
  font-family: SimHei;
  color: #4d4d4d;
}
.BT_Eitem > div:nth-child(2) {
  font-size: 0.346667rem;
  margin-top: 0.106667rem;
  width: 6.32rem;
  /* line-height: 18px; */
  height: 1.013333rem;
  margin-bottom: .266667rem;
  color: #646b77;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.BT_Eitem > div:nth-child(3) {
  /* margin-top: 16px; */
  font-size: 0.373333rem;
  color: #b0afb4;
}

/* 按钮 */
.BT_btn {
  display: flex;
  line-height: 0.72rem;
  margin-top: 0.106667rem;
  justify-content: space-between;
}
.BT_btn > div:nth-child(1) {
  font-size: 0.453333rem;
  color: #ff3c3c;
}
.BT_btn button {
  font-size: 0.266667rem;
  width: 1.626667rem;
  border-radius: 0.133333rem;
  color: #f44b65;
  height: 27px;
  border: none;
  border: 2px solid #fab4c4;
  background-color: white;
}
</style>